<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			#box {
				width: 100vw;
				height: 100vh;
				background: chartreuse;
			}
		</style>
		<script>
			window.onload = function() {
				var oBox = document.getElementById("box");
				//				touchstart 触屏开始
				oBox.addEventListener('touchstart', function(ev) {
					var ev = window.event || ev;
					console.log('开始触摸屏幕');
//					ev.changedTouches是一个数组,里面记录了触屏发生时各个手指的相关信息
					console.dir(ev.changedTouches[0].clientX);
//					阻止默认事件,在有些情况下,如果没有阻止,可能触发不了touchmove和touchend事件
					ev.preventDefault();
				})
				oBox.addEventListener('touchmove', function(ev) {

					var ev = window.event || ev;
					console.log('正在持续触摸屏幕');

				})
				oBox.addEventListener('touchend', function(ev) {

					var ev = window.event || ev;
					console.log('差不多行了，触摸屏幕完毕');

				})
			}
		</script>
	</head>

	<body>
		<div id="box"></div>
	</body>

</html>